import React from "react";
// import { useState } from "react";
// 引入组件
import MainLayout from "./layout";
import Login from "./views/Login";
import NotFound from "./views/NotFound";
import RequireAuth from "./guard/RequireAuth";
// 引入子组件
import DashBord from "./views/DashBord";
// 引入路由
import { Route, Routes } from "react-router-dom";
// 引入子路由数组
// import { adminRoutes } from "./router/index.js";
import { filterRoutes } from "./router/index";

function App() {
  // const [count, setCount] = useState(0);

  return (
    <div className="App">
      {/* 定义路由映射关系 */}
      <Routes>
        <Route
          path="/admin"
          element={
            // 路由拦截，要想呈现MainLayout这个组件，就必须经过RequireAuth
            <RequireAuth>
              <MainLayout />
            </RequireAuth>
          }
        >
          {/* 子路由  路径不加斜杠，要加斜杠就要写全路径 */}
          {/* <Route path="dashbord" element={<DashBord />}></Route> */}
          {filterRoutes().map((item) => {
            //由于filterRoutes是一个函数，需要调用才可以用到里面的数据
            return (
              <Route
                key={item.path}
                path={item.path}
                element={<item.element />}
              ></Route>
            );
          })}
        </Route>
        <Route path="/login" element={<Login />}></Route>
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </div>
  );
}

export default App;
